<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
    </style>
    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script>
        $(function () {

            const typeId = getParam("typeId")
            console.log("typeId:",typeId)

            showNoteTypes()

            $("#save").click(function () {
                const title = $("#title").val()
                const content = $("#content").val()
                const typeIdSelect = $("#type").val()

                // 如果标题、内容都没输入，就直接关闭
                if(content === "" && content === ""){
                    layer.closeAll()
                    return
                }
                $.ajax({
                    url:'note/save',//请求的url
                    type:'POST', //请求方式，GET或POST
                    data:{ //发送服务器的数据
                        title,
                        content,
                        typeId:typeIdSelect
                    },
                    dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                    success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                        if(data.code == 0){
                            parent.layer.closeAll()
                        }else{
                            let temp = `
                            <div class="alert alert-danger" role="alert">
                                ${data.msg}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>`
                            $("#container").append(temp)
                        }
                    },
                    error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    }
                })
            })
        })
        function showNoteTypes() {
            $.ajax({
                url:'noteType/list',//请求的url
                type:'GET', //请求方式，GET或POST
                data:{ //发送服务器的数据
                },
                dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                    if(data.code == 0){
                        for( let item of data.data){
                            const temp = `<option value="${item.id}">${item.name}</option>`
                            $("#type").append(temp)
                        }
                    }else{
                        let temp = `
                            <div class="alert alert-danger" role="alert">
                                ${data.msg}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>`
                        $("#container").append(temp)
                    }
                },
                error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            })
        }
        function getParam(name)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == name){return pair[1];}
            }
            return(false);
        }
    </script>
</head>
<body>
<div class="container" id="container">
    <select class="form-control" id="type">
    </select>
    <br>
    <input type="text" class="form-control" id="title" placeholder="标题">
    <br>
    <textarea class="form-control" id="content" rows="14"></textarea>

    <button class="btn btn-outline-primary my-2 my-sm-0" type="button" id="save">保存</button>
</div>
</body>
</html>